<!-- 未纳入保障成员添加/修改 -->
<template>
  <a-modal
    :visible="visible"
    :title="`${$isEmpty(data) ? '添加' : '修改'}未纳入保障成员`"
    :okText="$isEmpty(data) ? '添加' : '修改'"
    :confirmLoading="isSubmit"
    :afterClose="handleClose"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form">
        <a-form-item label="姓名" extra="始终要包含家庭成员,多个姓名使用逗号隔开">
          <a-input
            placeholder="请输入姓名"
            v-decorator="['FName', { rules: [{ required: true, message: '请输入姓名' }] }]"
          />
        </a-form-item>
        <a-form-item label="身份证号">
          <a-input
            placeholder="请输入身份证号"
            v-decorator="['FIDCard', { rules: [{ required: true, validator: validatorIDCard }] }]"
          />
        </a-form-item>
        <a-form-item label="与申请人关系">
          <a-select
            placeholder="请选择与申请人关系"
            v-decorator="['FRelation', { rules: [{ required: true, message: '请选择与申请人关系' }] }]"
          >
            <a-select-option v-for="item in relationOptions" :key="item.DROPKEY" :value="item.DROPVALUE">{{
              item.DROPVALUE
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="户籍信息">
          <a-select v-decorator="['Category', { rules: [{ required: true, message: '请选择户籍信息' }] }]">
            <a-select-option value="本市">本市</a-select-option>
            <a-select-option value="非本市">非本市</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { validIDCard } from '@/utils/validate'
import lodash from 'lodash'
export default {
  inject: ['hasIDCard'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      isSubmit: false,
      spinning: false,
      form: this.$form.createForm(this, { name: 'assure' }),
      relationOptions: [
        {
          DROPKEY: '配偶',
          DROPVALUE: '配偶'
        }, {
          DROPKEY: '未达法定婚龄子女',
          DROPVALUE: '未达法定婚龄子女'
        }, {
          DROPKEY: '其他',
          DROPVALUE: '其他'
        }
      ]
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.spinning = true
        this.fetchData()
      }
    }
  },
  methods: {
    fetchData () {
      if (!this.$isEmpty(this.data)) {
        this.form.setFieldsValue(lodash.pick(this.data, ['Category', 'FName', 'FIDCard', 'FRelation']))
      }
      this.spinning = false
    },

    validatorIDCard (rule, value, callback) {
      if (this.$isEmpty(value)) {
        callback(new Error('请输入身份证号'))
        return
      }
      if (!validIDCard(value)) {
        callback(new Error('不是有效的身份证号码'))
      } else {
        if (this.hasIDCard(value) && this.data.FIDCard !== value) {
          callback(new Error('此身份证已添加,请重新输入'))
          return
        }
        callback()
      }
    },
    handleClose () {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
      this.form.resetFields()
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.handleClose()
          const data = Object.assign({}, values, {
            ID: this.data.ID || '',
            LID: this.data.LID || '',
            ApplyNO: this.data.ApplyNO || '',
            FHouseArea: this.data.FHouseArea || ''
          })
          this.$emit('change', {
            type: this.$isEmpty(this.data) ? 'add' : 'edit',
            data
          })
        }
      })
    },
    handleCancel () {
      this.handleClose()
    }
  }
}
</script>
<style lang="less" scoped>
</style>
